<template>
    <app-layout>
        <view>
            <view class="select-box">
                <view
                    :style="editForm.bg_default === 'image' ? 'filter: blur(10px);background-image: url( ' + editForm.card_pic + ')' : 'background-color: ' + editForm.bg_color"
                    class="bg"></view>
                <view class="dir-top-nowrap cross-center" style="position:relative;">
                    <view id="content" class="s-n-bg">
                        <image v-if="editForm.is_card == 1" :src="editForm.card_pic"></image>
                    </view>
                    <view v-if="editForm.is_shop == 1 && mch.store"
                          :style="{top: `${editForm.shop_info_top + 104}rpx`}"
                          class="dir-top-nowrap main-center cross-center"
                          style="position: absolute;z-index:3;">
                        <image v-if="editForm.logo_show == 1" :src="mch.store.cover_url" class="s-n-avatar"></image>
                        <view v-if="editForm.shop_name_show == 1" class="s-n-shopname t-omit">{{
                                mch.store.name
                            }}
                        </view>
                        <image id="calcImage" :src="editForm.line_pic" class="s-n-img"></image>
                    </view>
                    <!-- 店铺背景 -->
                    <template v-if="editForm.code_pos === 'left'">
                        <view
                            class="dir-top-nowrap"
                            style="width: 652rpx; background: #FFFFFF;border-radius: 32rpx;position: relative;margin-top: -40rpx"
                        >
                            <!-- 店铺背景 -->
                            <view :style="{marginTop: `${calcHeight}`}"
                                  class="dir-left-nowrap main-between cross-center"
                                  style="width: 100%;padding: 20rpx 30rpx">
                                <view class="dir-top-nowrap" style="text-align: left">
                                    <view style="font-size: 32rpx;color:#000000;">{{ editForm.code_title }}
                                    </view>
                                    <view :style="{paddingTop: `${editForm.code_title_padding}rpx`}"
                                          style="font-size: 24rpx;color: #999999">
                                        {{ editForm.code_sub_title }}
                                    </view>
                                </view>
                                <image :src="editForm.customize_poster"
                                       :style="{height: `${editForm.code_size}rpx`,width:`${editForm.code_size}rpx`}"></image>
                            </view>
                        </view>
                    </template>
                    <template v-if="editForm.code_pos === 'center'">
                        <view
                            class="dir-top-nowrap"
                            style="width: 652rpx; background: #FFFFFF;border-radius: 32rpx;position: relative;margin-top: -40rpx"
                        >
                            <!-- 店铺背景 -->
                            <view :style="{marginTop: `${calcHeight}`}"
                                  flex="dir:top main:center cross:center"
                                  style="width: 100%;padding: 20rpx 0;text-align: center">
                                <image :src="editForm.customize_poster"
                                       :style="{height: `${editForm.code_size}rpx`,width:`${editForm.code_size}rpx` }"></image>
                                <view style="font-size: 32rpx;color:#000000;">
                                    {{ editForm.code_title }}
                                </view>
                                <view style="font-size: 24rpx;color: #999999;padding-top: 12rpx">
                                    {{ editForm.code_sub_title }}
                                </view>
                            </view>
                        </view>
                    </template>
                    <template v-if="editForm.code_pos === 'right'">
                        <view
                            class="dir-top-nowrap"
                            style="width: 652rpx; background: #FFFFFF;border-radius: 32rpx;position: relative;margin-top: -40rpx"
                        >
                            <!-- 店铺背景 -->
                            <view
                                :style="{marginTop: `${calcHeight}`}"
                                class="dir-left-nowrap cross-center"
                                style="width: 100%;padding: 20rpx 30rpx">
                                <image :src="editForm.customize_poster"
                                       :style="{height: `${editForm.code_size}rpx`,width:`${editForm.code_size}rpx` }"></image>
                                <view class="dir-top-nowrap" style="text-align: left;margin-left: 20rpx">
                                    <view style="font-size: 32rpx;color:#000000;">{{ editForm.code_title }}
                                    </view>
                                    <view :style="{paddingTop: `${editForm.code_title_padding}rpx`}"
                                          style="font-size: 24rpx;color: #999999">
                                        {{ editForm.code_sub_title }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view :style="{background: editForm.btn_theme == 1 ? getTheme.color : editForm.btn_bg}"
                      class="main-center cross-center self-poster-btn"
                      @click="savePoster">
                    {{ editForm.btn_title }}
                </view>
            </view>
        </view>
    </app-layout>
</template>
<script>
import {mapGetters} from 'vuex';

export default {
    name: "qrcode",
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
    },
    watch: {
        'editForm.shop_info_top'() {
            this.$nextTick(_ => {
                let query;
                // #ifndef MP-WEIXIN || MP-TOUTIAO
                query = uni.createSelectorQuery();
                // #endif
                // #ifdef MP-WEIXIN || MP-TOUTIAO
                query = uni.createSelectorQuery().in(this);

                // #endif
                function calcImage() {
                    return new Promise(resolve => {
                        query.select('#calcImage').boundingClientRect(rect => {
                            resolve(rect.top);
                        }).exec(rect => {
                            resolve(rect.top);
                        });
                    });
                }

                function content() {
                    return new Promise(resolve => {
                        query.select('#content').boundingClientRect(rect => {
                            resolve(rect.top);
                        }).exec(rect => {
                            resolve(rect.top);
                        });
                    });
                }

                const self = this;
                async function date() {
                    let h1 = await calcImage();
                    let h2 = await content();
                    self.calcHeight = (h1 - h2 > uni.upx2px(580) ? h1 - h2 - uni.upx2px(580) : 0) + 'px';
                    console.log(h1, h2, h1 - h2, self.calcHeight);
                }

                date();
            })
        }
    },
    data() {
        return {
            calcHeight: 0,
            mch: {},
            editForm: {},
            mch_id: 0,
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        const self = this;
        self.mch_id = options.mch_id;
        self.$request({
            url: self.$api.mch.self_poster,
            data: {
                mch_id: self.mch_id,
            }
        }).then(info => {
            if (info.code === 0) {
                self.editForm = info.data.config;
                self.mch = info.data.mch;
            } else {
                uni.showToast({title: info.msg, icon: 'none'})
            }
        })
    },
    methods: {
        savePoster: function () {
            this.$showLoading({text: '生成中'});
            this.$request({
                url: this.$api.mch.self_save_poster,
                data: {
                    pic_url: this.editForm.card_pic,
                    mch_id: this.mch_id,
                }
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.$utils.batchSave(info.data.pic_url).then(_ => {
                        uni.showToast({title: '保存成功'});
                    });
                } else {
                    uni.showToast({title: info.msg, icon: 'none'})
                }
            }).catch(() => {
                this.$hideLoading();
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.select-box {
    position: relative;
    min-height: 100vh;
    height: 100%;
    width: 100vw;
    top: 0;
    text-align: center;

    .s-n-bg {
        height: 652#{rpx};
        width: 652#{rpx};
        border-radius: 32#{rpx} 32#{rpx} 0 0;
        margin-top: 104#{rpx};
        overflow: hidden;

        image {
            height: 100%;
            width: 100%;
        }
    }

    .s-n-avatar {
        height: 140#{rpx};
        width: 140#{rpx};
        background: #D8D8D8;
        border-radius: 50%;
        border: 6#{rpx} solid white
    }

    .s-n-shopname {
        margin-top: 20#{rpx};
        color: #333333;
        font-size: 36#{rpx};
        white-space: normal !important;
        max-width: 625#{rpx};
    }

    .s-n-img {
        height: 48#{rpx};
        width: 594#{rpx};
        margin: 0 auto;
    }

    .bg {
        height: 100%;
        width: 100%;
        position: absolute;
        background-size: 100% 100%;
        background-repeat: no-repeat
    }

    .self-poster-btn {
        width: 652#{rpx};
        height: 100#{rpx};
        font-size: 32#{rpx};
        position: relative;
        border-radius: 50#{rpx};
        color: white;
        margin: 40#{rpx} auto 0;
    }
}
</style>